<%@page pageEncoding="UTF-8" %>
<%@ include file="../include/header.jsp" %>

<head>
    <meta charset="UTF-8">
    <title>${sysName} 详情</title>
    <link rel="shortcut icon" href="${ctx}/resources/image/logo.png"/>
    <link rel="bookmark" href="${ctx}/resources/image/logo.png"/>
    <link rel="stylesheet" href="${ctx}/resources/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctx}/resources/layuiadmin/style/admin.css" media="all">
    <%--    <link href="${ctx}/resources/element/element.css" rel="stylesheet">--%>
    <style>
        .img-logo {
            width: 55px;
            height: 55px;
            border: 2px solid #000000;
            background: white;
        }

        .layui-card-header {
            border-bottom: 0px solid #fff;
        }

        .flex-row {
            display: flex;
            flex-direction: row;
        }

        .flex-column {
            display: flex;
            flex-direction: column;
        }

        .flex-1 {
            flex: 1;
            justify-content: center;
            align-items: center;
            border: 1px solid #fff;
            text-align: center;
            padding: 10px;
            color: #358bfb;
        }

        .flex-center {
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 10px;
        }

        .header_statistics {
            padding: 25px;
            box-sizing: border-box;
            color: #fff;
            border-radius: 8px;
            position: relative;
            height: 210px;
        }

        .header_statistics .title {
            font-size: 24px;
            margin: 8px 0 15px;
        }

        .header_statistics .num {
            font-size: 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .echart_card {
            height: 250px !important;
            width: 100%;
            margin-bottom: 10px;
        }

        .echart_title {
            line-height: 40px;
            text-align: center;
            color: #3292ff;
            font-size: 24px;
            display: inline-block;
            padding: 0 25px;
            margin-top: -1px;
        }

        .blue_box {
            position: relative;
            background: #000637;
            text-align: center;
            border: 1px solid #002c5b;
        }

        .blue_box > span {
            position: absolute;
            width: 10px;
            height: 10px;
        }

        .blue_box.echart_title > span {
            position: absolute;
            width: 5px;
            height: 5px;
        }

        .blue_box span.t1 {
            border-left: 2px solid #3292ff;
            border-top: 2px solid #3292ff;
            left: -1px;
            top: -1px;
        }

        .blue_box span.t2 {
            border-right: 2px solid #3292ff;
            border-top: 2px solid #3292ff;
            right: -1px;
            top: -1px;
        }

        .blue_box span.t3 {
            border-left: 2px solid #3292ff;
            border-bottom: 2px solid #3292ff;
            left: -1px;
            bottom: -1px;
        }

        .blue_box span.t4 {
            border-right: 2px solid #3292ff;
            border-bottom: 2px solid #3292ff;
            right: -1px;
            bottom: -1px;
        }

        .view-border {
            border: 1px solid red;
        }

        .bg-black {
            background: #000;
        }

        .page_title {
            color: #358bfb;
            font-size: 40px;
            text-shadow: rgba(53, 139, 251, 0.5) 0 0 10px, rgba(53, 139, 251, 0.8) 0 0 50px, rgba(53, 139, 251, 1) 0 0 100px;
        }

        .layui-card-header > div,
        .layui-card-body > div,
        .yingye {
            color: #358bfb;
            font-size: 12px;
        }

        table tr:first-child {
            color: #358bfb;
        }

        /* 给不是第一行的设置字体颜色 */
        table tr:not(:first-child) {
            color: #2fece9;
        }

        .operation {
            width: 30px;
            height: 30px;
            position: absolute;
            right: 30px;
            top: 30px;
        }

        .time_select_list {
            display: inline-flex;
            height: 30px;
        }

        .time_select_list {
            position: absolute;
            right: 5px;
            top: 5px;
            color: #fff;
        }

        .time_select_list li {
            width: 40px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            cursor: pointer;
        }

        .time_select_list li.active {
            border-bottom: 1px solid #3290ef;
        }

        /* 陌生人预警 */
        .time_select_list_1 {
            display: inline-flex;
            height: 30px;
        }

        .time_select_list_1 {
            position: absolute;
            right: 5px;
            top: 5px;
            color: #fff;
        }

        .time_select_list_1 li {
            width: 40px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            cursor: pointer;
        }

        .time_select_list_1 li.active {
            border-bottom: 1px solid #3290ef;
        }

        /* 老鼠预警 */
        .time_select_list_2 {
            display: inline-flex;
            height: 30px;
        }

        .time_select_list_2 {
            position: absolute;
            right: 5px;
            top: 5px;
            color: #fff;
        }

        .time_select_list_2 li {
            width: 40px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            cursor: pointer;
        }

        .time_select_list_2 li.active {
            border-bottom: 1px solid #3290ef;
        }

        /* 晨检 */
        .time_select_list_3 {
            display: inline-flex;
            height: 30px;
        }

        .time_select_list_3 {
            position: absolute;
            right: 5px;
            top: 5px;
            color: #fff;
        }

        .time_select_list_3 li {
            width: 40px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            cursor: pointer;
        }

        .time_select_list_3 li.active {
            border-bottom: 1px solid #3290ef;
        }

        /* 消毒 */
        .time_select_list_4 {
            display: inline-flex;
            height: 30px;
        }

        .time_select_list_4 {
            position: absolute;
            right: 5px;
            top: 5px;
            color: #fff;
        }

        .time_select_list_4 li {
            width: 40px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            cursor: pointer;
        }

        .time_select_list_4 li.active {
            border-bottom: 1px solid #3290ef;
        }


        /* 达标 */
        .time_select_list_5 {
            display: inline-flex;
            height: 30px;
        }

        .time_select_list_5 {
            position: absolute;
            right: 5px;
            top: 5px;
            color: #fff;
        }

        .time_select_list_5 li {
            width: 40px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            cursor: pointer;
        }

        .time_select_list_5 li.active {
            border-bottom: 1px solid #3290ef;
        }


        .tmp-bt {
            background: #3290ef;
            color: #fff;
            border-radius: 2px;
            margin-right: 10px;
            padding: 8px;
        }
    </style>
</head>

<body>
<div id="app" v-cloak>
    <div class="flex-row flex-center blue_box">
        <div class="page_title">{{baseInfoData.name}} {{individual_id}}</div>
    </div>
    <image class="operation open" src="${ctx}/resources/image/icon_full.png"></image>
    <!--经营户基本信息 -->
    <div class="layui-row card0 blue_box">
        <div class="layui-row layui-col-md10 ">
            <div class="layui-col-md4">
                <div class="layui-card-header">
                    <div style="text-align: left">负责人： <span>{{baseInfoData.person}}</span></div>
                </div>
                <div class="layui-card-body ">
                    <div style="text-align: left">地址：<span>{{baseInfoData.address}}</span></div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-card-header">
                    <div style="text-align: left">联系方式： <span>{{baseInfoData.mobile}}</span></div>
                </div>
                <div class="layui-card-body ">
                    <div style="text-align: left">主题类型： <span>{{baseInfoData.mainTypeName}}</span></div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-card-header">
                    <div style="text-align: left">地区：
                        <span>{{baseInfoData.districtName}}->{{baseInfoData.townName}}</span></div>
                </div>
                <div class="layui-card-body ">
                    <div style="text-align: left">统一社会信用代码： <span>{{baseInfoData.socialCode}}</span></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md2">
            <div class="yingye">营业执照</div>
            <div id="images">
                <%--<img class="img-logo" :src="baseInfoData.licenseImage"/>--%>
                <el-image class="img-logo" :src="baseInfoData.licenseImage" :preview-src-list="previewImage(baseInfoData.licenseImage)"></el-image>
            </div>
        </div>
    </div>
    <!-- echart 列表 -->
    <div class="layui-row layui-col-space15 bg-black" style="padding: 8px;">
        <div class="layui-col-sm6 layui-col-md4 flex-column">
            <div class="echart_card blue_box" >
                <span class="t1"></span>
                <span class="t2"></span>
                <span class="t3"></span>
                <span class="t4"></span>
                <div class="echart_title blue_box" @click="showAlbumDialog()">
                     违规预警
                    <span class="t1"></span>
                    <span class="t2"></span>
                    <span class="t3"></span>
                    <span class="t4"></span>
                </div>
                <div id="main1" class="layui-col-md12" style="height:235px;"></div>
                <div class="layui-inline time_select_list">
                    <li data-type="day">今日</li>
                    <li data-type="week" class="active">本周</li>
                    <li data-type="month">本月</li>
                    <li data-type="year">全年</li>
                </div>
            </div>
            <div class="echart_card blue_box">
                <span class="t1"></span>
                <span class="t2"></span>
                <span class="t3"></span>
                <span class="t4"></span>
                <div class="echart_title blue_box">
                    陌生人预警
                    <span class="t1"></span>
                    <span class="t2"></span>
                    <span class="t3"></span>
                    <span class="t4"></span>
                </div>
                <div id="main3" class="layui-col-md12" style="height:235px;"></div>
                <div class="layui-inline time_select_list_1">
                    <li data-type="day">今日</li>
                    <li data-type="week" class="active">本周</li>
                    <li data-type="month">本月</li>
                    <li data-type="year">全年</li>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md4 ">
            <div class="blue_box"
                 style="height:500px;margin-top: 10px; display: flex;justify-content: center;align-items: center">
                <span class="t1"></span>
                <span class="t2"></span>
                <span class="t3"></span>
                <span class="t4"></span>
                <image class="" src="${ctx}/resources/image/logo.png"></image>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md4 flex-column" >
            <div class="echart_card blue_box" >
                <span class="t1"></span>
                <span class="t2"></span>
                <span class="t3"></span>
                <span class="t4"></span>
                <div class="echart_title blue_box"> 晨检预警
                    <span class="t1"></span>
                    <span class="t2"></span>
                    <span class="t3"></span>
                    <span class="t4"></span>
                </div>
                <div id="main2" class="layui-col-md12" style="height:200px;"></div>
                <div class="layui-inline time_select_list_3">
                    <li data-type="day">今日</li>
                    <li data-type="week" >本周</li>
                    <li data-type="month">本月</li>
                    <li data-type="year" class="active">全年</li>
                </div>
            </div>
            <div class="echart_card blue_box">
                <span class="t1"></span>
                <span class="t2"></span>
                <span class="t3"></span>
                <span class="t4"></span>
                <div class="echart_title blue_box"> 餐具消毒预警
                    <span class="t1"></span>
                    <span class="t2"></span>
                    <span class="t3"></span>
                    <span class="t4"></span>
                </div>
                <div id="main4" class="layui-col-md12" style="height:200px;"></div>
                <div class="layui-inline time_select_list_4">
                    <li data-type="day">今日</li>
                    <li data-type="week">本周</li>
                    <li data-type="month">本月</li>
                    <li data-type="year" class="active">全年</li>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space15 bg-black" style="padding: 8px;">
        <div class="layui-col-sm6 layui-col-md4">
            <div class="echart_card blue_box">
                <span class="t1"></span>
                <span class="t2"></span>
                <span class="t3"></span>
                <span class="t4"></span>
                <div class="echart_title blue_box">老鼠预警
                    <span class="t1"></span>
                    <span class="t2"></span>
                    <span class="t3"></span>
                    <span class="t4"></span>
                </div>
                <div id="main5" class="layui-col-md12" style="height:235px;"></div>
                <div class="layui-inline time_select_list_2">
                    <li data-type="day">今日</li>
                    <li data-type="week" class="active">本周</li>
                    <li data-type="month">本月</li>
                    <li data-type="year" >全年</li>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md4">
            <div class="echart_card blue_box">
                <span class="t1"></span>
                <span class="t2"></span>
                <span class="t3"></span>
                <span class="t4"></span>
                <div class="echart_title blue_box">设备
                    <span class="t1"></span>
                    <span class="t2"></span>
                    <span class="t3"></span>
                    <span class="t4"></span>
                </div>
                <div id="main6" class="layui-col-md12" style="height:235px;"></div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md4">
            <div class="echart_card blue_box">
                <span class="t1"></span>
                <span class="t2"></span>
                <span class="t3"></span>
                <span class="t4"></span>
                <div class="echart_title blue_box">达标率统计
                    <span class="t1"></span>
                    <span class="t2"></span>
                    <span class="t3"></span>
                    <span class="t4"></span>
                </div>
                <div id="main7" class="layui-col-md12" style="height:220px;"></div>
                <div class="layui-inline time_select_list_5">
                    <li data-type="week" >本周</li>
                    <li data-type="month">本月</li>
                    <li data-type="year" class="active">全年</li>
                </div>
            </div>
        </div>
    </div>

    <!-- 工作人员列表  -->
    <div class="layui-row layui-col-space15 ">
        <div class="layui-card blue_box">
            <div class="blue_box echart_title" style="padding: 8px;">工作人员列表
                <span class="t1"></span>
                <span class="t2"></span>
                <span class="t3"></span>
                <span class="t4"></span></div>
            <div class="layui-card-body layui-text blue_box">
                <table class="layui-table blue_box">
                    <colgroup>
                        <col width="100">
                        <col>
                    </colgroup>
                    <tbody>
                    <tr>
                        <td>姓名</td>
                        <td>年龄</td>
                        <td>联系方式</td>
                        <td>居住地址</td>
                        <td>身份证</td>
                        <td>健康证</td>
                        <%--                        <td>违规次数</td>--%>
                    </tr>
                    <tr v-for="item in workerList">
                        <td>{{item.name}}</td>
                        <td>{{item.age}}</td>
                        <td>{{item.mobile}}</td>
                        <td>{{item.address}}</td>
                        <td>{{item.identityCard}}</td>
                        <td>{{item.healthCard}}</td>
                        <%--                        <td>{{item.name}}</td>--%>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- 晨检记录 -->
    <div class="layui-row layui-col-space15">
        <div class="layui-card blue_box">
            <div class="blue_box echart_title" style="padding: 8px;">晨检记录
                <span class="t1"></span>
                <span class="t2"></span>
                <span class="t3"></span>
                <span class="t4"></span></div>
            <div class=" layui-text blue_box">
                <div class="flex-row">
                    <div class="flex-1">05-01</div>
                    <div class="flex-1">05-02</div>
                    <div class="flex-1">05-03</div>
                    <div class="flex-1">05-04</div>
                    <div class="flex-1">05-05</div>
                    <div class="flex-1">05-06</div>
                    <div class="flex-1">更多...</div>
                </div>
                <table class="layui-table blue_box">
                    <colgroup>
                        <col width="100">
                        <col>
                    </colgroup>
                    <tbody>
                    <tr>
                        <td>姓名</td>
                        <td>体温（36.3°C~37.5°C）</td>
                        <td>日期</td>
                    </tr>
                    <tr v-for="item in workerTemList">
                        <td>{{item.name}}</td>
                        <td class="flex-row flex-center">
                            <div class="tmp-bt flex-column " v-for="tmp in item.tempertures">
                                <div>{{tmp.measuringTime|capitalize}} {{tmp.temperature}}
                                    {{tmp.state==1?'(正常)':'(异常)'}}
                                </div>
                            </div>
                        </td>
                        <td>{{item.entryTime}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- 消毒柜记录 -->
    <div class="layui-row layui-col-space15 blue_box">
        <div class="layui-card blue_box">
            <div class="blue_box echart_title" style="padding: 8px;">消毒柜记录
                <span class="t1"></span>
                <span class="t2"></span>
                <span class="t3"></span>
                <span class="t4"></span></div>
            <div class=" layui-text blue_box">
                <div class="flex-row">
                    <div class="flex-1">05-01</div>
                    <div class="flex-1">05-02</div>
                    <div class="flex-1">05-03</div>
                    <div class="flex-1">05-04</div>
                    <div class="flex-1">05-05</div>
                    <div class="flex-1">05-06</div>
                    <div class="flex-1">更多...</div>
                </div>
                <table class="layui-table blue_box">
                    <colgroup>
                        <col width="100">
                        <col>
                    </colgroup>
                    <tbody>
                    <tr>
                        <td>消毒柜编号</td>
                        <td>消毒时间</td>
                        <td>耗电量</td>
                        <td>是否合格</td>
                        <td>日期</td>
                    </tr>
                    <tr v-for="item in disinfectList">
                        <td>{{item.name}}</td>
                        <td>{{item.duration}}小时</td>
                        <td>{{item.degree}}度</td>
                        <td>{{item.state ==1 ? "合格":"不合格"}}</td>
                        <td>{{item.timeStr}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- 摄像头 -->
    <div class="layui-row layui-col-space15 blue_box">
        <div class="layui-card blue_box">
            <div class="blue_box echart_title" style="padding: 8px;">摄像头
                <span class="t1"></span>
                <span class="t2"></span>
                <span class="t3"></span>
                <span class="t4"></span></div>
            <div class=" layui-text blue_box">
                <table class="layui-table blue_box">
                    <colgroup>
                        <col width="100">
                        <col>
                    </colgroup>
                    <tbody>
                    <tr>
                        <td>通道ID</td>
                        <td>监控名称</td>
                        <td>添加时间</td>
                    </tr>
                    <tr v-for="item in camerasList">
                        <td>{{item.channelNo}}</td>
                        <td>{{item.cameraName}}</td>
                        <td>{{item.createTime}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!--预警图片弹窗-->
    <el-dialog title="违规记录" :visible.sync="isShowAlbum" :close-on-click-modal="false"  @close="closeAlbumDialog"
               width="80%" >
            <div class="tabs" style="height: 75%;" >
                <el-tabs stretch=true v-model="activeName" @tab-click="tabClick" lazy='true'>
                    <el-tab-pane label="未佩戴口罩" name="tab1">
                        <div class="flex-column" v-for="item of data1">
                            <div style="font-size: 16px;font-weight: bold; height: 32px;display: flex;align-items: center">{{item.timeDate}} </div>
                            <div class="flex-row srollview" style="height: 100%;">
                                <div v-for="it of item.albums" :key="it">
                                    <el-image style=" margin:5px; width: 247px; height: 147px" class="img-logo" :src="'${imgesBaseUrl}/'+it.violationimages" :preview-src-list="previewImage('${imgesBaseUrl}/'+it.violationimages)"></el-image>
                                    <div style="width: 100%; height:20px;text-align: center;">{{it.violationtime}}</div>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="未穿工衣" name="tab2">
                        <div class="flex-column" v-for="item of data2">
                            <div style="font-size: 16px;font-weight: bold;height: 32px;display: flex;align-items: center">{{item.timeDate}} </div>
                            <div class="flex-row srollview">
                                <div v-for="it of item.albums">
                                    <el-image style=" margin:5px; width: 247px; height: 147px" class="img-logo" :src="'${imgesBaseUrl}/'+it.violationimages" :preview-src-list="previewImage('${imgesBaseUrl}/'+it.violationimages)"></el-image>
                                    <div style="width: 100%; text-align: center;">{{it.violationtime}}</div>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="未佩戴帽子" name="tab3">
                        <div class="flex-column" v-for="item of data3">
                            <div style="font-size: 16px;font-weight: bold;height: 32px;display: flex;align-items: center">{{item.timeDate}} </div>
                            <div class="flex-row srollview">
                                <div v-for="it of item.albums">
                                    <el-image style=" margin:5px; width: 247px; height: 147px" class="img-logo" :src="'${imgesBaseUrl}/'+it.violationimages" :preview-src-list="previewImage('${imgesBaseUrl}/'+it.violationimages)"></el-image>
                                    <div style="width: 100%; text-align: center;">{{it.violationtime}}</div>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="未佩戴手套" name="tab4">
                        <div class="flex-column" v-for="item of data4">
                            <div style="font-size: 16px;font-weight: bold;height: 32px;display: flex;align-items: center">{{item.timeDate}} </div>
                            <div class="flex-row srollview">
                                <div v-for="it of item.albums">
                                    <el-image style=" margin:5px; width: 247px; height: 147px" class="img-logo" :src="'${imgesBaseUrl}/'+it.violationimages" :preview-src-list="previewImage('${imgesBaseUrl}/'+it.violationimages)"></el-image>
                                    <div style="width: 100%; text-align: center;">{{it.violationtime}}</div>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="吸烟" name="tab5">
                        <div class="flex-column" v-for="item of data5">
                            <div style="font-size: 16px;font-weight: bold; height: 32px;display: flex;align-items: center">{{item.timeDate}} </div>
                            <div class="flex-row srollview">
                                <div v-for="it of item.albums">
                                    <el-image style=" margin:5px; width: 247px; height: 147px" class="img-logo" :src="'${imgesBaseUrl}/'+it.violationimages" :preview-src-list="previewImage('${imgesBaseUrl}/'+it.violationimages)"></el-image>
                                    <div style="width: 100%; text-align: center;">{{it.violationTime}}</div>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
    </el-dialog>
</div>
</body>

<script src="${ctx}/resources/layuiadmin/echarts.min.js"></script>
<script src="${ctx}/resources/js/jquery-1.12.4.min.js"></script>
<script src="${ctx}/resources/js/vue.min.js"></script>

<script>
    $(function () {
        //全屏展示
        $(document).on('click', '.operation.open', function () {
            fullScreen();
        });

        //取消全屏
        $(document).on('click', '.operation.close', function () {
            exitFullScreen();
        });


        function fullScreen() {
            var el = document.documentElement;
            var rfs = el.requestFullScreen || el.webkitRequestFullScreen;
            if (typeof rfs != "undefined" && rfs) {
                rfs.call(el);
            } else if (typeof window.ActiveXObject != "undefined") {
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript != null) {
                    wscript.SendKeys("{F11}");
                }
            } else if (el.msRequestFullscreen) {
                el.msRequestFullscreen();
            } else if (el.oRequestFullscreen) {
                el.oRequestFullscreen();
            } else {
                layer.msg('浏览器不支持全屏调用，请更换浏览器或按F11键切换全屏！');
            }
            $('.operation').removeClass('open').addClass('close');
            $('.operation').attr("src", "${ctx}/resources/image/icon_exit_full.png");
        }

        /*
         * 浏览器退出全屏
         */
        function exitFullScreen() {
            var el = document;
            var cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.exitFullScreen;
            if (typeof cfs != "undefined" && cfs) {
                cfs.call(el);
            } else if (typeof window.ActiveXObject != "undefined") {
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript != null) {
                    wscript.SendKeys("{F11}");
                }
            } else if (el.msExitFullscreen) {
                el.msExitFullscreen();
            } else if (el.oRequestFullscreen) {
                el.oCancelFullScreen();
            } else {
                layer.msg('浏览器不支持全屏调用，请更换浏览器或按F11键切换全屏！');
            }
            $('.operation').removeClass('close').addClass('open');
            $('.operation').attr("src", "${ctx}/resources/image/icon_full.png");
        }
    });
</script>
<!-- jq 年月日切换 -->
<script>
    const url_weigui = "${ctx}/backstage/details/getViolationStatistics" // 获取违规预警统计数据
    const url_moshengren = "${ctx}/backstage/details/getFaceStrangerStatistics" // 获取陌生人统统计数据
    const url_living = "${ctx}/backstage/details/getLivingStatistics" // 获取活物统统计数据 (老鼠 动物 )
    const url_tem = "${ctx}/backstage/details/getTemStatistics" // 获取体温统计(晨检预警数据)
    const url_disinfect = "${ctx}/backstage/details/getDisinfectStatistics" // 获取消毒统计(消毒预警数据)
    const url_ControlRates = "${ctx}/backstage/details/getControlRatesStatistics" // 达标统计(达标统计数据)
    const url_DeviceCountAndType = "${ctx}/backstage/details/getDeviceCountAndType" // 设备统计

    const STATISTICAL = 1;// 统计图
    const PIE = 2;
    const CURVE = 3; //曲线图
    var individual_id = '${individual_id}'
    // 先加载vue.js，让页面渲染完成后加载jq，再给jq绑定ready事件
    $(document).ready(function () {
        // 初始化 违规预警 统计图数据
        let param = {individual_id: individual_id, violation_state: 1, type: 3, timeStr: ""}
        initData(url_weigui, param, myChart1, STATISTICAL)
        // 违规预警数据 年月日切换
        $(".time_select_list").on("click", "li", function () {
            $(this).addClass('active').siblings().removeClass('active');
            var dateType = $('.time_select_list li.active').attr('data-type');
            get_electric_graphical(dateType, url_weigui, myChart1, STATISTICAL);
        })
        // ===============陌生人预警========================
        // type 1:年   2:月  3:本周  4:当天  选填
        let param1 = {individual_id: individual_id, type: 3, timeStr: ""}
        initData(url_moshengren, param1, myChart3, STATISTICAL)
        // 监听 年月日切换
        $(".time_select_list_1").on("click", "li", function () {
            $(this).addClass('active').siblings().removeClass('active');
            var dateType = $('.time_select_list_1 li.active').attr('data-type');
            get_electric_graphical(dateType, url_moshengren, myChart3, STATISTICAL);
        })
        // ===============老鼠预警========================
        let param2 = {individual_id: individual_id, type: 3, timeStr: ""}
        initData(url_living, param2, myChart5, STATISTICAL)
        // 事件委托监听 年月日切换
        $(".time_select_list_2").on("click", "li", function () {
            $(this).addClass('active').siblings().removeClass('active');
            var dateType = $('.time_select_list_2 li.active').attr('data-type');
            get_electric_graphical(dateType, url_living, myChart5, STATISTICAL);
        })

        // ===============晨检预警========================
        let param3 = {
            individual_id: individual_id,
            type: 1,
            timeStr: date.getFullYear()/* + "-" + (date.getMonth() + 1) + "-" + date.getDate()*/
        }
        initData(url_tem, param3, myChart2, PIE)
        // 事件委托监听 年月日切换
        $(".time_select_list_3").on("click", "li", function () {
            $(this).addClass('active').siblings().removeClass('active');
            var dateType = $('.time_select_list_3 li.active').attr('data-type');
            get_electric_graphical(dateType, url_tem, myChart2, PIE);
        })


        // ===============消毒柜预警========================
        let param4 = {
            individual_id: individual_id,
            type: 1,
            timeStr: date.getFullYear()
        }
        initData(url_disinfect, param4, myChart4, PIE)
        // 事件委托监听 年月日切换
        $(".time_select_list_4").on("click", "li", function () {
            $(this).addClass('active').siblings().removeClass('active');
            var dateType = $('.time_select_list_4 li.active').attr('data-type');
            get_electric_graphical(dateType, url_disinfect, myChart4, PIE);
        })




        // ===============达标统计图========================
        let param5 = {
            individual_id: individual_id,
            type: 1,
            timeStr: date.getFullYear()
        }
        initData(url_ControlRates, param5, myChart7, CURVE)
        // 事件委托监听 年月日切换
        $(".time_select_list_5").on("click", "li", function () {
            $(this).addClass('active').siblings().removeClass('active');
            var dateType = $('.time_select_list_5 li.active').attr('data-type');
            get_electric_graphical(dateType, url_ControlRates, myChart7, CURVE);
        })

        // ===============达标统计图========================
        let param6 = {
            individual_id: individual_id,
            type: 1,
            timeStr: date.getFullYear()
        }
        initData(url_DeviceCountAndType, param6, myChart6, STATISTICAL)

    });

    /**
     * 统计图数据初始化封装
     * url 请求的url
     * param 请求的参数
     * chart_id 渲染的div的id
     * type 1统计图 2饼状图
     * */
    function initData(url, param, chart_id, type) {
        request(url, param, function (res) {
            if (res.data == null) {
                return
            }
            if (type == 1) {
                chart_id.setOption(getOptionForStatistical(res.data.arrx, res.data.arry));
            }
            if (type == 2) {
                // 饼状图 颜色区分开
                if(url==url_disinfect){
                    let color=[ 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple' ]
                    let op=getOptionForPie(res.data)
                    op.color=color;
                    chart_id.setOption(op);
                }else {
                    chart_id.setOption(getOptionForPie(res.data,[]));
                }
            }
            if (type == 3) {
                chart_id.setOption(getCure(res.data.arrx, res.data.arry));
            }

        })
    }

    /**
     * type 年月份日
     * url 请求的url
     * chart_id 渲染到哪个div上
     * */
    var date = new Date();

    function get_electric_graphical(type, url, chart_id, graphType) {
        var that = this;

        //今天
        let today = that.dateFormat("yyyy-MM-dd", new Date());
        let toMonth = that.dateFormat("yyyy-MM", new Date());
        let param = {individual_id: individual_id, violation_state: 1, type: 0, timeStr: ""}
        switch (type) {
            case "day":
                param.type = 4
                param.timeStr = today;
                break
            case "week":
                param.type = 3
                param.timeStr = ""
                break
            case "month":
                param.type = 2
                param.timeStr = toMonth  //获取当前月份(0-11,0代表1月)
                break
            case "year":
                param.type = 1
                param.timeStr = "" + date.getFullYear();
                break
        }
        request(url, param, function (res) {
            if (res.data == null) {
                return
            }
            if (graphType == 1) {
                chart_id.setOption(getOptionForStatistical(res.data.arrx, res.data.arry));
            }
            if (graphType == 2) {
                // 饼状图 颜色区分开
                if(url==url_disinfect){
                    let color=[ 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple' ]
                    let op=getOptionForPie(res.data)
                    op.color=color;
                    chart_id.setOption(op);
                }else {
                    chart_id.setOption(getOptionForPie(res.data,[]));
                }
            }
            if (graphType == 3) {
                chart_id.setOption(getCure(res.data.arrx, res.data.arry));
            }
        })
    }


    /**
     * 统计图 数据请求封装
     * @param url
     * @param param
     * @param cb
     */
    function request(url, param, cb) {
        $.ajax({
            url: url,
            data: param,
            dataType: 'json',
            success: function (returndata) {
                if (returndata.success) {
                    cb(returndata)
                } else {
                    console.log("请求失败==" + JSON.stringify(returndata))
                }
            }
        });
    }

    // 正则获取uri参数中的id
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        } else {
            return null
        }
        ;
    }
</script>

<script src="${ctx}/resources/element/element.js"></script>
<script src="${ctx}/resources/layuiadmin/layui/layui.js"></script>
<script>
    const urlBaseInfo = "${ctx}/backstage/details/getIndividualDetails"; // 获取基本数据
    const urlWorkerList = "${ctx}/backstage/details/getBusinWorkerList"; // 获取经营户的工作人员
    const urlWorkerTemList = "${ctx}/backstage/details/getWorkerTemList"; // 根据经营户获取工作人员的体温列表
    const urCamerasList = "${ctx}/backstage/details/getCameraDevices"; // 根据经营户获取摄像头列表
    const urDisinfectList = "${ctx}/backstage/details/getDisinfectByIndividualId"; // 根据经营户获取消毒列表
    const queryViolationByTime = "${ctx}/backstage/details/queryViolationByTime"; // 获取违规图片

    var app = new Vue({
        el: '#app',
        data: {
            baseInfoData: {},
            workerList: [],
            workerTemList: [],
            camerasList: [],
            disinfectList: [],
            isShowAlbum:false,
            tabActive:'',
            data1:[],
            data2:[],
            data3:[],
            data4:[],
            data5:[],
        },
        created: function () {
            var that = this;

            //今天
            let today = that.dateFormat("yyyy-MM-dd", new Date());
            let toMonth = that.dateFormat("yyyy-MM", new Date());

            // 获取基本数据
            that.request(urlBaseInfo, {'individual_id': ${individual_id}}, function (res) {
                if (res.data.licenseImage != null) {
                    res.data.licenseImage = '${imgesBaseUrl}' + res.data.licenseImage
                }
                that.baseInfoData = res.data
            });
            // 获取工人人员列表
            let param = {'individual_id': ${individual_id}, 'page': 1, 'size': 100}
            that.request(urlWorkerList, param, function (res) {
                // console.log("获取工人人员列表=" + JSON.stringify(res.data))
                // {"count":0,"pageTotal":0,"pageSize":100,"pageIndex":0,"list":[]}
                that.workerList = res.data.list
            });
            // 获取工作人员的体温列表

            that.request(urlWorkerTemList, {'individual_id': ${individual_id}, 'timeStr': today}, function (res) {
                console.log("工作人员的体温列表=" + JSON.stringify(res.data))
                that.workerTemList = res.data
            });


            // 获取消毒柜列表
            that.request(urDisinfectList, {'individual_id': ${individual_id}, 'timeStr': today}, function (res) {
                console.log("消毒柜列表=" + JSON.stringify(res.data))
                that.disinfectList = res.data
            });

            //请求摄像头列表
            that.request(urCamerasList, {'individual_id': ${individual_id}}, function (res) {
                console.log("摄像头列表=" + JSON.stringify(res.data))
                that.camerasList = res.data
            });

            this.activeName = 'tab1';
            //请求违规图片
            this.getTabData(1);

        },
        filters: {
            capitalize: function (value) {
                if (!value) return ''
                return value.split(" ")[1]
            }
        },
        methods: {
            request: function (url, param, cb) {
                var that = this
                $.ajax({
                    url: url,
                    data: param,
                    dataType: 'json',
                    success: function (returndata) {
                        if (returndata.success) {
                            cb(returndata)
                        } else {
                            console.log("requestBaseInfo=" + JSON.stringify(returndata));
                        }
                    }
                });
            },
            // 正则获取uri参数中的id
            getQueryString: function (name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) {
                    return unescape(r[2]);
                } else {
                    return null
                }
                ;
            },
            previewImage: function (licenseImage) {
                var arr = [];
                arr.push(licenseImage);
                return arr;
            },
            dateFormat: function (fmt, date) {
                let ret;
                const opt = {
                    "y+": date.getFullYear().toString(),        // 年
                    "M+": (date.getMonth() + 1).toString(),     // 月
                    "d+": date.getDate().toString(),            // 日
                    "h+": date.getHours().toString(),           // 时
                    "m+": date.getMinutes().toString(),         // 分
                    "s+": date.getSeconds().toString()          // 秒
                    // 有其他格式化字符需求可以继续添加，必须转化成字符串
                };
                for (let k in opt) {
                    ret = new RegExp("(" + k + ")").exec(fmt);
                    if (ret) {
                        fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
                    }
                    ;
                }
                ;
                return fmt;
            },
            showAlbumDialog:function () {
                this.isShowAlbum = true;
            },
            closeAlbumDialog: function() {
                this.isShowAlbum = false;
            },
            getTabData: function(type){
                var that = this;
                this.request(queryViolationByTime, {'individualId': ${individual_id},'type':type}, function (res) {
                    if(type ==1){
                        that.data1 = res.data
                    }else if(type == 2){
                        that.data2 = res.data
                    }else if(type == 3){
                        that.data3 = res.data
                    }else if(type == 4){
                        that.data4 = res.data
                    }else if(type == 5){
                        that.data5 = res.data
                    }
                });
            },
            tabClick:function (tab,event) {

                if(tab.name =="tab1"){
                    this.getTabData(1);
                }else if(tab.name == "tab2"){
                    this.getTabData(2);
                }else if(tab.name == "tab3"){
                    this.getTabData(3);
                }else if(tab.name == "tab4"){
                    this.getTabData(4);
                }else if(tab.name == "tab5"){
                    this.getTabData(5);
                }
            }
        }
    })
</script>
<script>
    var myChart1 = echarts.init(document.getElementById('main1'));
    var myChart2 = echarts.init(document.getElementById('main2'));
    var myChart3 = echarts.init(document.getElementById('main3'));
    var myChart4 = echarts.init(document.getElementById('main4'));
    var myChart5 = echarts.init(document.getElementById('main5'));
    var myChart6 = echarts.init(document.getElementById('main6'));
    var myChart7 = echarts.init(document.getElementById('main7'));
    // 指定图表的配置项和数据
    var option1 = {
        title: {
            text: '最近七日访问量',
            textStyle: {
                fontWeight: 'normal',              //标题颜色
                color: '#2fece9'
            },
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#3292ff'
                }
            }
        },
        legend: {
            data: [""]
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#2fece9',  //更改坐标轴文字颜色
                        fontSize: 14      //更改坐标轴文字大小
                    }
                },
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#2fece9',  //更改坐标轴文字颜色
                        fontSize: 14      //更改坐标轴文字大小
                    }
                },
            }
        ],
        series: [
            {
                name: '今日访问量',
                type: 'line',
                stack: '总量',
                color: ['#3292ff'],
                areaStyle: {},
                data: [60, 32, 101, 130, 120, 150, 0],
                itemStyle: {
                    normal: {
                        label: {
                            show: true, //开启显示
                            position: 'top', //在上方显示
                            textStyle: { //数值样式
                                color: 'white',
                                fontSize: 16
                            }
                        }
                    }
                },
            }

        ]
    };
    var arr = []
    for (let i = 6; i >= 0; i--) {
        arr.push(getBeforeDate(i))
    }
    option1.xAxis[0].data = arr

    /**
     * 获取统计图 配置数据
     * */
    function getOptionForStatistical(arrx, arry) {
        var option0 = {
            // 右上角显示 echart自带按钮
            toolbox: {
                show: true,
                feature: {
                    mark: {
                        show: true
                    },
                    magicType: {
                        show: true,
                        type: ["line", "bar"]
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            // 可设置是否拖拽
            calculable: true,
            grid: {
                x: 50,
                x2: 0
            },
            xAxis: {
                type: 'category',
                data: arrx,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#2fece9',  //更改坐标轴文字颜色
                        fontSize: 14      //更改坐标轴文字大小
                    }
                },
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#2fece9',  //更改坐标轴文字颜色
                        fontSize: 14      //更改坐标轴文字大小
                    }
                },
            },
            series: [{
                data: arry,
                type: 'bar',
                barMaxWidth: 30,
                showBackground: true,
                // backgroundStyle: {
                //     color: '#3290ef'
                // },
                itemStyle: {
                    normal: {
                        // 柱子颜色
                        color: '#3290ef',
                        label: {
                            show: true, //开启显示
                            position: 'top', //在上方显示
                            textStyle: { //数值样式
                                color: 'white',
                                fontSize: 16
                            }
                        }
                    }
                },
            }]
        };

        return option0;
    }


    //曲线图
    function getCure(arrx, arry) {
        var option = {
            title: {
                text: '',
                textStyle: {
                    fontWeight: 'normal',              //标题颜色
                    color: '#2fece9'
                },
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#3292ff'
                    }
                }
            },
            legend: {
                data: [""]
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: arrx,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#2fece9',  //更改坐标轴文字颜色
                            fontSize: 14      //更改坐标轴文字大小
                        }
                    },
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#2fece9',  //更改坐标轴文字颜色
                            fontSize: 14      //更改坐标轴文字大小
                        }
                    },
                }
            ],
            series: [
                {
                    name: '达标率',
                    type: 'line',
                    stack: '总量',
                    color: ['#3292ff'],
                    areaStyle: {},
                    data: arry,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true, //开启显示
                                position: 'top', //在上方显示
                                textStyle: { //数值样式
                                    color: 'white',
                                    fontSize: 16
                                }
                            }
                        }
                    },
                }

            ]
        };
        return option;
    }

    /**
     * 获取饼状图 配置数据
     */

    function getOptionForPie(list) {
        var nameArr = []
        var nameArr_x = []
        list.forEach(function (v, i) {
            let key = Object.keys(v)[0]
            nameArr.push(key)
            nameArr_x.push({value: v[key], name: key})
        })
        var option = {
            title: {
                text: '',
                subtext: '',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: nameArr,
                textStyle: {
                    color: '#2fece9',  //更改坐标轴文字颜色
                    fontSize: 14      //更改坐标轴文字大小
                }
            },
            series: [
                {
                    name: '晨检统计',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: nameArr_x,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        return option;
    }

    function getBeforeDate(number) {
        const num = number;
        const date = new Date();
        let year = date.getFullYear();
        let mon = date.getMonth() + 1;
        let day = date.getDate();
        if (day <= num) {
            if (mon > 1) {
                mon = mon - 1;
            } else {
                year = year - 1;
                mon = 12;
            }
        }
        date.setDate(date.getDate() - num);
        year = date.getFullYear();
        mon = date.getMonth() + 1;
        day = date.getDate();
        const s = (mon < 10 ? ('0' + mon) : mon) + '-' + (day < 10 ? ('0' + day) : day);
        return s;
    }
</script>
